<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        a {
            text-decoration: none;
            color: black;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./themes/icon.css">
    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./jquery.easyui.min.js"></script>
</head>

<body>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north'" style="height:50px">
            <div style="padding: 10px">
                <button class="login"><a href="./reg">登录</a></button>
                <button class="reg"><a href="./login">注册</a></button>
            </div>

        </div>
        <div data-options="region:'south',split:true" style="height:50px;"></div>
        <div data-options="region:'west',split:true" title="菜单" style="width:200px;">

            <div class="easyui-accordion" data-options="fit:true">
                <div title="快捷菜单" data-options="iconCls:'icon-application-cascade'" style="padding:5px;">
                    <ul class="easyui-tree wu-side-tree">
                        <li iconCls="icon-chart-organisation">
                            <a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="component/user.html">
								用户管理
							</a>
                        </li>
                        <li iconCls="icon-chart-organisation">
                            <a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="component/cate.html">
								分类管理
							</a>
                        </li>
                        <li iconCls="icon-chart-organisation">
                            <a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="component/product.html">
								产品管理
							</a>
                        </li>
                        <li iconCls="icon-chart-organisation">
                            <a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="component/news.html">
								新闻管理
							</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div data-options="region:'center',title:'分类',iconCls:'icon-ok'">
            <div id="tt" class="easyui-tabs" data-options="fit:true">
                <!-- <div title="首页" data-options="href:'./component/user.html'"></div> -->

            </div>
        </div>
    </div>
    <script>
        $(function() {
            $('.wu-side-tree a').bind('click', function() {
                var title = $(this).text();
                var url = $(this).attr('data-link');
                addTab(title, url);
            })
        })

        function addTab(title, href) {
            var content = '<iframe style="width:100%;height:100%" frameborder="0" src="' + href + '"></iframe>';
            var tabPanel = $("#tt");
            title = title.trim();
            if (!tabPanel.tabs('exists', title)) {
                tabPanel.tabs('add', {
                    title: title,
                    content: content,
                    fit: true,
                    closable: true
                })
            } else {
                $('#tt').tabs('select', title);
                var selTab = $('#tt').tabs('getSelected');
                var url = $(selTab.panel('options').content).attr('src');
                $('#tt').tabs('update', {
                    tab: selTab,
                    options: {
                        content: content
                    }
                })
            }
        }
    </script>

</body>

</html>